<script setup lang="ts">
  import { ref } from "vue";

  const modalVisible = ref(false);
</script>

<template>
  <umrp-container padding="32px 16px" :gap="20">
    <umrp-container justify="between" direction="horizonal" align="center">
      <umrp-text :size="20" bold>我的家族</umrp-text>
      <umrp-button type="primary" @click="modalVisible = true">新增家族</umrp-button>
    </umrp-container>
    <umrp-row :gutter="24">
      <umrp-col :span="6" v-for="_ in 4">
        <umrp-card>
          <template #cover>
            <umrp-image :height="200"></umrp-image>
          </template>
          <template #body>
            <umrp-container padding="10px" :gap="10">
              <umrp-text>家族名称</umrp-text>
              <umrp-text color="secondary">家族描述</umrp-text>
            </umrp-container>
          </template>
        </umrp-card>
      </umrp-col>
    </umrp-row>
    <umrp-modal v-model:visible="modalVisible" :width="500">
      <umrp-form>
        <umrp-form-item label="家族名称">
          <umrp-input></umrp-input>
        </umrp-form-item>
        <umrp-form-item label="家族描述">
          <umrp-input></umrp-input>
        </umrp-form-item>
      </umrp-form>
    </umrp-modal>
  </umrp-container>
</template>
